<script setup>

</script>

<template>
	<van-cell title="招慕职位名称">
		<template #right-icon>
			<!-- 右图标 -->
			<van-icon name="/src/assets/attend.svg" class="r-icon" />
		</template>
		<template #label>
			<!-- 学校 -->
			<div id="school">
				<van-icon name="/src/assets/R-C.jpg" class="school-icon" />
				<span style="font-size: 70%; margin-left:2px" id="school-name">电子科技大学成都学院</span>
			</div>
			<div id="keyword">
				<!-- 关键字 -->
				<van-button type="primary" size="mini" color="#cdf3ff">关键字1
				</van-button>
				<van-button type="primary" size="mini" color="#cdf3ff">关键字2
				</van-button>
				<van-button type="primary" size="mini" color="#cdf3ff">关键字3
				</van-button>
			</div>
		</template>
	</van-cell>
	<van-divider :style="{ height:'1px', color: '#bbb', borderColor: '#bbb', padding: '0 16px',margin: '0' }">
	</van-divider>
	<van-cell id="job_details"
		value="招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内招募职位介绍一百字内" />
	<van-divider :style="{ height:'1px', color: '#bbb', borderColor: '#bbb', padding: '0 16px',margin: '0' }">
	</van-divider>
	<!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
	<!-- </van-list> -->
</template>

<script>
	import {
		ref
	} from 'vue';

	export default {
		setup() {
			const list = ref([]);
			const loading = ref(false);
			const finished = ref(false);

			const onLoad = () => {
				// 异步更新数据
				// setTimeout 仅做示例，真实场景中一般为 ajax 请求
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						list.value.push(list.value.length + 1);
					}

					// 加载状态结束
					loading.value = false;

					// 数据全部加载完成
					if (list.value.length >= 40) {
						finished.value = true;
					}
				}, 1000);
			};

			return {
				list,
				onLoad,
				loading,
				finished,
			};
		},
	};
</script>

<style scoped>
	.van-cell {
		height: fit-content;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: baseline;
		font-weight: 600;
	}

	.van-cell__label {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	#school {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 20px;
	}

	#keyword {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: fit-content;
		height: fit-content;
	}

	.van-button {
		box-shadow: 2px 2px 2px rgba(0,0,0,.2);
		width: fit-content;
		height: fit-content;
	}

	.van-button--mini {
		font-size: 8px;
		color: #000000 !important;
		font-weight: 600;
	}
	#job_details{
		--van-cell-font-size: 10px;
		font-weight: 500;
		line-height:200%
	}
</style>
